<%--
关注餐厅页面
显示某一个餐厅的菜品，店家的主页就是这个
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title">
            <input type="hidden" id="getShopId" value="${shopId}">
            <input type="hidden" id="pageNum" value="${shop.foodNum}">
<%--            我发现这个shopName可以来自主页面，虽然请求不一样--%>
            <span class="iconfont icon-dianpu "></span>&nbsp;${shopName}
            <div class="mynav-right">共${shop.foodNum}件相关商品</div>
        </div>
        <div class="mynav-content">
            <ul class="mynav" id="mynav"><li><a id="orderByPrice" href="${pageContext.request.contextPath}/shop/orderByPrice?sid=${shopId}">价格<span>⬆</span></a></li><li><a href="" id="orderBySale">销量<span>⬇</span></a></li><li><a href="" id="orderByReport">评论<span>⬇</span></a></li><li style="display: none"></li></ul>
        </div>
        <%--所有菜品:点击菜品可以对菜品进行管理--%>
        <div id="foodList">
            <c:forEach items="${shop.foodList}" var="foodInfo">
                <div class="myfood">
                    <div class="myfoodcontent">
                        <div class="food-img-content">
                            <a class="food-a" href="${pageContext.request.contextPath}/shop/updateFoodById.do?foodId=${foodInfo.foodId}">
                                <img class="food-img" src="../statics/images/food/${foodInfo.foodImg}">
                            </a>
                        </div>
                        <p class="food-price-content">
                            <span>￥</span>${foodInfo.foodPrice}
                        </p>
                        <div class="food-title-content">
                            <a href="${pageContext.request.contextPath}/shop/updateFoodById.do?foodId=${foodInfo.foodId}">${foodInfo.foodName}</a>
                        </div>
                        <div class="food-statue">
                            <span>月成交<em>${foodInfo.foodSale}+笔</em></span>
                            <span>评价<a href="${pageContext.request.contextPath}/shop/updateFoodById.do?foodId=${foodInfo.foodId}">${foodInfo.foodReport}</a></span>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <nav >
            <ul id="pageNav" class="pagination  center">
                <%-- 如果当前不是第一页，则显示上一页的按钮，店铺的页面弄过来 --%>
                <li >
                    <a ><span>«</span> </a>
                </li>
                <%-- 导航页数 --%>
                <li class="active">
                    <a >1</a>
                </li>
                <li >
                    <a >2</a>
                </li>
                <li>
                    <a >3</a>
                </li>
                <%-- 如果当前不是最后一页，则显示下一页的按钮 --%>
                <li>
                    <a id="rightNav" >
                        <span>»</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</div>

<script>

    // $("#foodList").hide()//隐藏可以暂时作为删除,
    // var foodList = document.getElementById('foodList')
    // removeDiv(foodList)
    function removeDiv(foodList){
        var list = document.getElementsByClassName('myfood')
        for (var i = list.length-1;i>=0;i--){
            foodList.removeChild(list[i])
        }
    }

    //添加一个元素
    // addDiv('bc62a3c4f5464d8fb5a51e0195b02d3c','food1.png','麻辣大虾（大份）','123.00','50','0')
    function addDiv(foodId,foodImgsrc,foodName,foodPrice,foodSale,foodReport){
        var myfood = document.createElement('div');
        foodList.appendChild(myfood)
        myfood.className = 'myfood'
        var myfoodcontent = document.createElement('div');
        myfood.appendChild(myfoodcontent)
        myfoodcontent.className = 'myfoodcontent'


        var imgcontent = document.createElement('div');
        imgcontent.className = 'food-img-content'
        myfoodcontent.appendChild(imgcontent)
        var foodA = document.createElement('a');
        foodA.className = 'food-a'
        foodA.href = "${pageContext.request.contextPath}/shop/updateFoodById.do?foodId="+foodId
        imgcontent.appendChild(foodA)
        var foodImg = document.createElement('img');
        foodImg.src = '../statics/images/food/'+foodImgsrc
        foodImg.className = 'food-img'
        foodA.appendChild(foodImg)

        var pricecontent = document.createElement('p');
        pricecontent.className = 'food-price-content'
        pricecontent.innerHTML = '<span>￥</span>'+foodPrice
        myfoodcontent.appendChild(pricecontent)


        var titlecontent = document.createElement('div');
        titlecontent.className = 'food-title-content'
        myfoodcontent.appendChild(titlecontent)
        var foodNameA = document.createElement('a');
        foodNameA.href = "${pageContext.request.contextPath}/shop/updateFoodById.do?foodId="+foodId
        foodNameA.innerText = foodName
        titlecontent.appendChild(foodNameA)


        var statuecontent = document.createElement('div');
        statuecontent.className = "food-statue"
        myfoodcontent.appendChild(statuecontent)
        var statuespan1 = document.createElement('span');
        statuespan1.innerHTML = '月成交<em>'+foodSale+'+笔</em>'
        statuecontent.appendChild(statuespan1)
        var statuespan2 = document.createElement('span');
        statuespan2.innerHTML = '评价<a href="${pageContext.request.contextPath}/shop/updateFoodById.do?foodId='+foodId+'">'+foodReport+'</a>'
        statuecontent.appendChild(statuespan2)
    }


</script>

<script>
    //定义变量
    //得到li对象
    var lis = document.getElementById('pageNav').getElementsByTagName('li')
    //定义当前数值按钮数
    var butNum = lis.length-2
    //当前页数
    var page = 1
    //15条最大记录数;
    var pageSize = 15
    //那个li是active
    var last = 1
    //定义最后一页，除法可能会有余数
    var maxPage
    if ($("#pageNum").val()%pageSize==0){
        maxPage = parseInt($("#pageNum").val()/pageSize)
    }
    else{
        maxPage = parseInt($("#pageNum").val()/pageSize) +1
    }
    //定义navs
    var navs = document.getElementById('mynav').querySelectorAll('li')
    //记录排序规则3没有规则，0按照价格，1按照销量，2按照评论数,恰好就是navs下标
    var sortType = 0
    function sentAjax(begin,i){
        $.ajax({
            url:"../shop/queryShopFood.data",
            type:"GET",
            data:{
                shopId:$("#getShopId").val(),
                begin:begin,
                size:pageSize,
                sortType:i,
            },
            success:function (data){
                if (data.flag==1){
                    navs[sortType].style.backgroundColor = '#fff';
                    navs[data.i].style.backgroundColor = '#fab';
                    sortType = data.i
                    //更新页
                    setNumNav(begin)
                    //
                    removeDiv(document.getElementById('foodList'))
                    // addDiv('bc62a3c4f5464d8fb5a51e0195b02d3c','food1.png','麻辣大虾（大份）','123.00','50','0')
                    //显示这一页有多少个
                    data = data.shop
                    console.log(data.foodNum)
                    for (var i = 0;i<data.foodNum;i++){
                        console.log(i)
                        var json = data.foodList[i]
                        addDiv(json.foodId,json.foodImg,json.foodName,json.foodPrice,json.foodSale,json.foodReport)
                    }
                }
            }
        })
    }
    navs.forEach(function (el){
        el.addEventListener('click',function (e){
            e.preventDefault()
            console.log(e.target.textContent)
            if (e.target.textContent=="价格⬆"){
                i = 0
            }
            else {
                if (e.target.textContent=="销量⬇"){
                    i = 1
                }
                else{
                    i = 2
                }
            }
            sentAjax(1,i)
        })
    })

    function setNumNav(pos){
        pos = parseInt(pos)
        console.log(pos)
        //一定不是左右按钮
        if (pos == page){
            return true
        }
        //左边个数，不包含当前页码
        var templeft = parseInt(butNum/2)
        //剩下的包含了当前页码，中间+右边的个数,
        var surplus = butNum - templeft
        var begin
        if (pos-templeft>0&&pos+surplus<=maxPage+1){
            begin = pos-templeft
        }
        else{
            if (pos-templeft>0){
                //说明右边越界了，因为总页面>=最多显示页面，所以左边不可能越界
                //最后需要+1，循环次数少1
                begin = maxPage - butNum + 1
            }
            else{
                //说明左边越界了，因为总页面>=最多显示页面，所以右边不可能越界
                begin = 1
            }
        }
        for (var i=1;i<=butNum;i++){
            lis[i].getElementsByTagName('a')[0].innerHTML= begin-1+i
        }

        $("#pageNav").children("li:eq("+last+")").removeClass('active')
        last = pos - begin + 1
        $("#pageNav").children("li:eq("+last+")").addClass('active')

        //左右箭头隐藏和显示
        if (lis[butNum].getElementsByTagName('a')[0].innerHTML<maxPage){
            $("#pageNav").children("li:eq("+(lis.length-1)+")").show()
        }
        else{
            $("#pageNav").children("li:eq("+(lis.length-1)+")").hide()
        }
        if (lis[1].getElementsByTagName('a')[0].innerHTML>1){
            $("#pageNav").children("li:eq(0)").show()
        }
        else{
            //不能向右就隐藏
            $("#pageNav").children("li:eq(0)").hide()
        }
        page = pos
    }
    initNav()
    function initNav(){
        $("#pageNav").children("li:eq(0)").hide()
        if (maxPage<butNum){
            $("#pageNav").children("li:eq("+(butNum+1)+")").hide()
            for (var i = butNum;i>maxPage;i--){
                $("#pageNav").children("li:eq("+i+")").hide()
            }
            butNum = maxPage
        }
        $("#pageNav").children("li:eq(0)").click(function (){
            sentAjax(page-1,sortType)
        })
        $("#pageNav").children("li:eq("+(lis.length-1)+")").click(function (){
            sentAjax(page+1,sortType)
        })
        for (var i = 1;i<=butNum;i++){
            $("#pageNav").children("li:eq("+i+")").click(function (e){
                // setNumNav(i),还是不能写i，因为i认为是最后的值
                sentAjax(parseInt(e.target.textContent),sortType)
            })
        }
    }
</script>
<style>
    .mynav-content{
        width: 100%;
    }
    .mynav{
        list-style: none;
        padding-left: 0;
        display: flex;
        font-size: 12px;
        justify-content: end;
    }
    .mynav a{
        text-decoration: none;
    }
    .mynav li{
        padding: 12px 4px;
        border: 1px solid #f5f5f5;
        margin-right: 5px;
        margin-left: 5px;
    }
    .mynav li:hover{
        color: #ff0036 !important;
        cursor: pointer;
        background-color: #2aabd2;
    }
    .myfood{
        height: 300px;
        width: 220px;
        margin-right: 20px;
        margin-left: 20px;
        position: relative;
        float: left;
        padding: 0;
        overflow: visible;
        z-index: 1;
        font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
    }
    .myfoodcontent{
        min-height: 98%;
        width: 210px;
        position: absolute;
        background-color: #fff;
        margin: 0;
        font-size: 0;
        border: 1px solid #f5f5f5;
        border-radius: 3px;
    }
    .food-img-content{
        width: 210px;
        height: 210px;
    }
    .food-a{
        text-align: center;
    }
    .food-img{
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 210px;
        border: 0;
        padding: 0;
    }
    .food-price-content{
        font-family: arial,verdana,sans-serif !important;
        color: #ff0036;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px;
        letter-spacing: normal;
        overflow: inherit !important;
        white-space: nowrap;
        display: block;
        padding: 0;
    }
    .food-price-content span{
        margin-right: 2px;
        font-weight: 700;
        font-size: 14px;
    }
    .food-title-content{
        display: block;
        color: #666;
        height: 14px;
        line-height: 12px;
        margin-bottom: 3px;
        word-break: break-all;
        font-size: 0;
        position: relative;
        overflow: hidden;
    }
    .food-title-content a{
        color: #333;
        font-size: 12px;
        font-family: 微软雅黑;
        line-height: 14px;
        margin: 0;
        padding: 0;
    }
    .food-statue{
        position: relative;
        height: 37px;
        border: none;
        margin-bottom: 0;
        color: #999;
        display: block;
        overflow: hidden;
    }
    .food-statue span{
        white-space: nowrap;
        float: left;
        border-right: 1px solid #ccc;
        margin: 10px 1px;
        /*margin-right: 6px;*/
        padding: 2px;
        line-height: 12px;
        text-align: left;
        font-size: 12px;
        width: auto;
    }
    .food-statue a{
        color: #38b;
        margin-top: -8px;
        font-family: arial;
        font-size: 12px;
        font-weight: 700;
        text-decoration: underline;
    }
    .myfood a:hover {
        color: #ff0036 !important;
        cursor: pointer;
    }
    .center{
        width: 100%;
    }
    .food-statue em{
        color: #b57c5b;
    }
    nav .pagination{
        justify-content: center;
        display: flex;
    }
    .mynav-right{
        color: #999;
        right: 30px;
        line-height: 22px;
        height: 19px;
        overflow: hidden;
        position: absolute;
        display: inline-block;
    }
</style>